<template>
	<view style="width: 100%;height: auto;">
		<div style="width: 100%;height: 100%;" v-if="hezuo==true">
			<div class="mask" style="align-items: flex-end;">
				<div class="w-full p-30 bg-white" style="max-height: 80vh; overflow:auto">
					<div>
						<div class="center fz30 font-bold">
							{{basicData.hezuo.title}}
						</div>
						<div class="mt-30" v-html="basicData.hezuo.content"></div>
					</div>
					<button class="mt-50" @click="hezuo=false">关闭</button>
				</div>
			</div>
		</div>

		
		<view class="my-content">
			<view class="form-box">
				<text class="form-title">合作事项</text>
				<view class="form-item">
					<picker mode="selector" :range="cooperateTypes" @change="onCooperateTypeChange" :disabled="!!formData.id">
						<view class="blue">
							{{ type || '点击选择合作事项' }}
						</view>
					</picker>
				</view>
			</view>
			<view class="form-box">
				<text class="form-title">姓名</text>
				<view class="form-item">
					<input type="text" :disabled="!!formData.id" placeholder="请输入姓名" v-model="formData.username" />
				</view>
			</view>
			<view class="form-box">
				<text class="form-title">手机号</text>
				<view class="form-item">
					<input type="text" maxlength="11" :disabled="!!formData.id" placeholder="请输入手机号" v-model="formData.phone" />
				</view>
			</view>
			<view class="form-box">
				<text class="form-title">合作内容简述</text>
				<view class="form-item">
					<textarea :disabled="!!formData.id" placeholder="请输入合作事项简述" v-model="formData.content"
						maxlength="60"></textarea>
					<text class="font-num">
						{{ formData.content.length }}/60
					</text>
				</view>
			</view>
			
			
			
			
			<button class="submit" v-if="formData.id"> {{ cooperateStatusText[formData.status] }}</button>

			<button class="submit" @click="submit" v-if="!formData.id">确认提交</button>
			
			<div class="mt-50">
				<div class="text text-gray-900 fz30 items-start" style="display: flex; margin-left: 15px;">
					<radio :checked="isRead" @click="isRead=!isRead" class="mr-15" />
					<div class="div">
						我已阅读并同意 <text class="text-blue" @click="hezuo=true">《合作协议》</text>
					</div>
				</div>
				<image src="/static/pic/login-car.png" mode="widthFix" class="w-full" style="opacity: 0.2;"></image>
			</div>
			
		</view>
		<view class="apply-con">
			<view class="apply-ab">
				<text>温馨提示</text>
				<text>我们会尽快联系您，请保持电话畅通！</text>
			</view>
			<image src="../../static/my/bg2.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isRead: false,
			shiyong: false,
			yinsi: false,
			hezuo:false,
			cooperateStatusText: ["未同意合作", "同意合作", "拒绝合作"],
			cooperateTypes: ['区域合作', '个人桩主', '物业合作', '充电桩并网'],
			type:'',
			formData: {
				id:'',
				// 合作内容
				content: "",
				// 合作类型：区域合作、个人桩主、物业合作、充电桩并网
				cooperate_type: "",
				// 合作电话
				phone: "",
				// 合作姓名
				username: "",
				// 用户id
				user_id: ""
			}
		}
	},
	computed: {
		basicData() {
			return this.$store.state.basicData
		}
	},
	async onLoad() {
		await this.getDetail()
	},
	methods: {
		async getDetail() {
			uni.showLoading({
				title: "加载中"
			})
			const res = await this.http("get", "/api/user/find_cooperate")
			uni.hideLoading()
			if(res.data){
				this.formData = res.data
				this.type = this.formData.cooperate_type
			}
		},
		onCooperateTypeChange(e) {
			var type = this.cooperateTypes[e.detail.value]
			this.type = type
		},
		async submit() {
			console.log(this.isRead)
			if (!this.isRead) {
				this.toast("请阅读协议并勾选同意")
				return
			}
			
			//验证4个表单项
			this.formData.cooperate_type = this.type
			
			if (!this.formData.cooperate_type) {
				this.toast("请选择合作事项")
				return
			}
			if (!this.formData.username) {
				this.toast("请输入姓名")
				return
			}
			if (!this.formData.phone) {
				this.toast("请输入手机号")
				return
			}
			if (!this.formData.content) {
				this.toast("请输入合作内容")
				return
			}
			const res = await this.http("post", "/api/user/apply_cooperate", this.formData, true)
			uni.showModal({
				content:'提交成功，请耐心等待客服回复'
			})
			
			if (res.code == 200) {
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		}
	}
}
</script>

<style lang="less" scoped>
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
.my-content {
	width: 100%;
	padding: 30upx;
	box-sizing: border-box;

	.form-box {
		width: 100%;
		border-radius: 16upx;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 20upx;
		padding: 30upx;
		box-sizing: border-box;

		.form-title {
			font-size: 36upx;
			color: #000;
			font-weight: 700;
			display: block;
		}

		.form-item {
			margin: 20upx 0;
			font-size: 32upx;

			.blue {
				color: #3662EC;
			}

			.font-num {
				color: #999;
				font-size: 28upx;
				text-align: right;
				display: block;
			}
		}
	}

	.submit {
		width: 100%;
		height: 80upx;
		border-radius: 16upx;
		background: #FF8F1F;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		color: #fff;
		line-height: 80upx;
		font-size: 44upx;
		font-weight: 700;
		margin-top: 40upx;
	}
}

.apply-con {
	width: 100%;
	position: relative;

	image {
		width: 100%;
		height: auto;
	}

	.apply-ab {
		position: absolute;
		bottom: 50upx;
		left: 0;
		z-index: 2;
		width: 100%;

		text {
			color: #fff;
			display: block;
			font-size: 36upx;
			text-align: center;
			margin-top: 30upx;
		}
	}
}
</style>